<template>
    <div style="background: #fff">
        <!-- 详情页面 -->
        <BaseHeader></BaseHeader>
        <drawer></drawer>
        <div class="shop-item-path">
            <div class="shop-nav-container">
                <div class="breadcurmb">
                    <div class="item" to="/" @click="$router.push('/')">
                        <span class="item-a">首页</span>
                        <span class="item-separator">/</span>
                    </div>
                    <div class="item" v-for="(item, index) in categoryBar" @click="doGoodsList(index)" :key="index">
                        <span class="item-a">{{ item.name }}</span>
                        <span class="item-separator">/</span>
                    </div>
                </div>
            </div>
        </div>
        <!-- 商品信息展示 -->
        <ShowGoods @handleClickSku="targetClickSku" v-if="goodsMsg.goods_id" :detail="goodsMsg"></ShowGoods>
        <!-- 商品详细展示 -->
        <!-- <ShowGoodsDetail v-if="goodsMsg.goods_id" :detail="goodsMsg"></ShowGoodsDetail> -->

        <Spin size="large" fix v-if="isLoading">loading</Spin>
        <Safedata></Safedata>
        <!-- <BaseFooter></BaseFooter> -->
    </div>
</template>

<script>
import Search from "@/components/Search";
import ShopHeader from "@/components/header/ShopHeader";
import ShowGoods from "@/components/goodsDetail/ShowGoods";
import ShowGoodsDetail from "@/components/goodsDetail/ShowGoodsDetail";
import {
    goodsSkuDetail
} from "@/api/goods";
import {
    cancelCollect,
    collectGoods,
    // isCollection,
    getGoodsDistribution,
} from "@/api/member";
import {
    getDetailById
} from "@/api/shopentry";
import imTalk from '@/components/mixes/talkIm'
export default {
    name: "GoodsDetail",
    beforeRouteEnter(to, from, next) {
        window.scrollTo(0, 0);
        next();
    },
    created() {
        this.getGoodsDetail();
    },
    mixins: [imTalk],
    data() {
        return {
            goodsMsg: {}, // 商品信息
            isLoading: false, // 加载状态
            categoryBar: [], // 分类
            storeCollected: false, // 商品收藏
            storeMsg: {}, // 店铺信息
        };
    },
    methods: {

        // 点击规格
        targetClickSku(val) {
            this.getGoodsDetail(val);
        },
        // 获取商品详情
        getGoodsDetail(val) {
            this.isLoading = true;
            const params = val || this.$route.query;

            // 分销员id
            let distributionId =
                params && params.distributionId ?
                    params.distributionId :
                    this.Cookies.getItem("distributionId");
            // 如果有分销信息
            if (distributionId) {
                // 先存储
                this.Cookies.setItem("distributionId", params.distributionId);
                let _this = this;
                // 绑定关系
                getGoodsDistribution(params.distributionId).then((res) => {
                    // 绑定成功，则清除关系
                    if (res.success) {
                        _this.Cookies.removeItem("distributionId");
                    }
                });
            }
            // 获取商品详情
            goodsSkuDetail(params)
                .then((res) => {
                    this.isLoading = false;
                    if (res.code == '1') {
                        const result = res.data.detail;
                        const cateName = res.data.categoryName;
                        const cateId = result.categoryPath.split(",");
                        const cateArr = [];
                        cateId.forEach((e, index) => {
                            // 插入分类id和name
                            cateArr.push({
                                id: e,
                                name: cateName[index],
                            });
                        });
                        this.categoryBar = cateArr;
                        this.goodsMsg = result
                        if (!this.storeMsg) {
                            // 获取店铺信息
                            getDetailById(this.goodsMsg.data.storeId).then((res) => {
                                if (res.success) {
                                    this.storeMsg = res.result;

                                }
                            });
                        }
                    } else {
                        // this.$msg.error(res.msg);
                        //this.$router.push("/");
                    }
                })
                .catch((e) => {
                    console.log('catch', e)
                    //this.$router.push("/");
                });
        },
        goGoodsList(currIndex) {
            // 跳转商品列表
            const arr = [];
            this.categoryBar.forEach((e, index) => {
                if (index <= currIndex) {
                    arr.push(e.id);
                }
            });


            //return location.origin + "/goodsList?categoryId=" + arr.toString();

            let domain = location.origin;
            if (location.pathname) {
                domain += location.pathname;
            }
            if (this.$router.mode === "hash") {
                domain += "#"
            }

            return domain + "?categoryId=" + arr.toString();
        },

        doGoodsList(currIndex) {
            // 跳转商品列表
            const arr = [];
            this.categoryBar.forEach((e, index) => {
                if (index <= currIndex) {
                    arr.push(e.id);
                }
            });

            this.$store.commit("SET_CATEGORYID", arr.toString());

            this.$router.push({
                path: '/',
                query: {
                    categoryId: arr.toString()
                }
            })

            //this.linkTo("/?categoryId=" + arr.toString())
        },

        async collect() {
            // 收藏店铺
            if (this.storeCollected) {
                let cancel = await cancelCollect("STORE", this.goodsMsg.data.storeId);
                if (cancel.success) {
                    this.$msg.success("已取消收藏");
                    this.storeCollected = false;
                }
            } else {
                let collect = await collectGoods("STORE", this.goodsMsg.data.storeId);
                if (collect.code === 200) {
                    this.storeCollected = true;
                    this.$msg.success("收藏店铺成功,可以前往个人中心我的收藏查看");
                }
            }
        },
    },
    watch: {},
    components: {
        Search,
        ShopHeader,
        ShowGoods,
        ShowGoodsDetail,
    },
};
</script>
<style scoped lang="scss">
.shop-item-path {
    height: 38px;
    @include background_color($light_background_color);
    line-height: 38px;
    color: #2c2c2c;
}

.shop-nav-container {
    width: 1200px;
    margin: 0 auto;
    position: relative;

    .store-collect {
        position: absolute;
        right: 20px;
        top: 0;
        color: #999;

        span {
            &:hover {
                cursor: pointer;
                color: $theme_color;
            }
        }
    }
}

.breadcurmb {
    color: #999;
    font-size: 12px;

    .item {
        display: inline-block;

        .item-a {
            cursor: pointer;
            color: #515a6e;
            transition: color 0.2s ease-in-out;
        }

        .item-separator {
            margin: 0 8px;
            color: #dcdee2;
        }
    }

    .item:last-child {
        font-weight: bold;
        color: #515a6e;

        .item-separator {
            display: none;
        }
    }
}
</style>
